/<template>
  <div>
      <div class="left">
            <ul>
                <li 
                v-for="(item,index) in list" 
                :key="index" @click="changeIndex(index)"
                :class="{on :activeIndex==index}"
                >{{item.title}}</li>
            </ul>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        list:Array,
        activeIndex:Number,
    },
    methods:{
        changeIndex(index){
            console.log(index);
            this.bus.$emit("changeActive" ,index);
        }
    }
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.left{
    float: left;
    width: 50px;
}
    ul{
        float: left;
        background-color: rgb(255, 229, 210);
    }
    ul li{
        line-height: 45px;
        margin-top: 5px;
    }
    .on{
        background-color: rgb(157, 157, 255);
        color: #fff;
    }
</style>